<script>
import UploadImage from '@/components/UploadImage.vue'

export default {
  name: 'EnterpriseEdit',
  components: { UploadImage },
  data () {
    return {
      baseImageSrc: process.env.VUE_APP_BASE_PATH,
      dataForm: {
        name: '',
        brand: '',
        headerLogo: '',
        footerLogo: '',
        src: '',
        contacts: '',
        phone: '',
        address: '',
        qrCode: '',
        qrInfo: '',
        enterpriseImg: '',
        enterpriseInfo: ''
      },
      rules: {
        headerLogo: [{ required: true, message: '请上传图片' }],
        footerLogo: [{ required: true, message: '请上传图片' }],
        qrCode: [{ required: true, message: '请上传图片' }],
        enterpriseImg: [{ required: true, message: '请上传图片' }],
        name: [{ required: true, message: '请输入网站名称' }],
        phone: [{ pattern: /^1\d{10}$/, message: '手机号码格式错误' }]
      },
      imageInfo: {
        headerLogo: { list: [] },
        footerLogo: { list: [] },
        qrCode: { list: [] },
        enterpriseImg: { list: [] }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.getById()
    })
  },
  methods: {
    getById () {
      this.dataForm = { ...this.$options.data().dataForm }
      this.imageInfo = { ...this.$options.data().imageInfo }
      this.$axios.get('enterprise',
        {
          params: {
            param: 'info'
          }
        }
      ).then(data => {
        this.dataForm = { ...data }
        this.imageInfo.headerLogo.list.push({ name: data.headerLogo, url: this.baseImageSrc + data.headerLogo })
        this.imageInfo.footerLogo.list.push({ name: data.footerLogo, url: this.baseImageSrc + data.footerLogo })
        this.imageInfo.qrCode.list.push({ name: data.qrCode, url: this.baseImageSrc + data.qrCode })
        this.imageInfo.enterpriseImg.list.push({ name: data.enterpriseImg, url: this.baseImageSrc + data.enterpriseImg })
      }).catch(e => e)
    },
    submit () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$axios.post('enterprise?param=update', this.dataForm).then(() => {
            this.$message.success('更新成功！')
          }).catch(e => e)
        }
      })
    },
    deleteImage ({ imageKey, index }) {
      this.imageInfo[imageKey].list.splice(index, 1)
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    },
    successImage ({ imageKey, filename }) {
      // const arr = [{ name: 'zhang', age: 22 }, { name: 'li', age: 33 }]
      // const names = arr.map(function (item) {
      //   return item.name
      // })
      // const names = arr.map(item => item.name)
      // console.log(names)

      this.imageInfo[imageKey].list.push({ name: filename, url: this.baseImageSrc + filename })
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    }
  }
}
</script>

<template>
  <el-card>
    <el-form :model="dataForm" :rules="rules" label-width="90px" ref="dataForm">
      <el-form-item label="网站名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="请输入网站名" clearable/>
      </el-form-item>
      <el-form-item label="品牌名称">
        <el-input v-model="dataForm.brand" placeholder="请输入品牌名" clearable/>
      </el-form-item>
      <el-form-item label="二维码介绍">
        <el-input v-model="dataForm.qrInfo" placeholder="请输入联系方式" clearable/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="dataForm.contacts" placeholder="请输入联系人" clearable/>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="请输入联系方式" clearable/>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="dataForm.address" type="textarea" placeholder="请输入联系地址" :rows="3" maxlength="200" show-word-limit/>
      </el-form-item>
      <el-form-item label="企业信息">
        <el-input v-model="dataForm.enterpriseInfo" type="textarea" placeholder="请输入企业信息" :rows="4" maxlength="500" show-word-limit/>
      </el-form-item>
      <el-form-item label="导航logo" prop="headerLogo">
        <el-input v-model="dataForm.headerLogo" style="display: none"/>
        <upload-image
          :image-list="imageInfo.headerLogo.list"
          :data="{type:'enterprise'}"
          image-key="headerLogo"
          :limit="5"
          @delete="deleteImage"
          @success="successImage"
        />
      </el-form-item>
      <el-form-item label="底部logo" prop="footerLogo">
        <el-input v-model="dataForm.footerLogo" style="display: none"/>
        <upload-image
          :image-list="imageInfo.footerLogo.list"
          :data="{type:'enterprise'}"
          image-key="footerLogo"
          @delete="deleteImage"
          @success="successImage"
        />
      </el-form-item>
      <el-form-item label="二维码" prop="qrCode">
        <el-input v-model="dataForm.qrCode" style="display: none"/>
        <upload-image
          :image-list="imageInfo.qrCode.list"
          :data="{type:'enterprise'}"
          image-key="qrCode"
          @delete="deleteImage"
          @success="successImage"
        />
      </el-form-item>
      <el-form-item label="企业图片" prop="enterpriseImg">
        <el-input v-model="dataForm.enterpriseImg" style="display: none"/>
        <upload-image
          :image-list="imageInfo.enterpriseImg.list"
          :data="{type:'enterprise'}"
          image-key="enterpriseImg"
          @delete="deleteImage"
          @success="successImage"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">

</style>
